<!--
 * @Descripttion: 量尺 三视图 效果图详情
 * @version:
 * @Author: lehaixia
 * @Date: 2022-10-26 16:48:01
 * @LastEditors: lehaixia
 * @LastEditTime: 2022-11-07 14:37:31
-->
<template>
  <div class="content">
    <ComHeader :title="title" @get-height="handleHeadHeight" />
    <div class="page-container" style="background:#F8F8FA">
      <List
        ref="list"
        :class="{'items':list.length>0}"
        :finished.sync="finished"
        :reset-fun="resetData"
        :load="load"
        :refresh="load"
        :default-active="true"
        :set-page-size="5"
      >
        <div v-for="(v,i) in list" :key="v.id" class="item">
          <div class="desc">上传时间： {{ v.createTime }} </div>
          <div v-if="v.belongSpace" class="desc">所属空间：  {{ v.belongSpace }}</div>
          <div v-if="v.attachmentName" class="desc">附件名称： {{ v.attachmentName }}</div>
          <div v-if="!v.attachmentList" class="img" @click="clickPreviewHandle(i)">
            <van-image :src="v.picUrl || v.attachmentPath | filterURL" fit="cover" height="151px" width="100%" :radius="12">
              <error-pic slot="error" />
            </van-image>
          </div>
          <div v-if="v.attachmentList" class="img-items">
            <div v-for="(vv,ii) in v.attachmentList" :key="vv.id" class="img-item" @click="clickPreviewHandle(i, ii)">
              <van-image :src="vv.attachmentPath | filterURL" fit="cover" height="151px" width="100%" :radius="12">
                <error-pic slot="error" />
              </van-image>
            </div>
          </div>
        </div>
      </List>
    </div>
  </div>
</template>
<script>
import List from '@/components/List'
import { getImgInfo } from '@/apis/optyCategory'
import { json2FormData } from '@/utils'
import ErrorPic from '@/components/ErrorPic'
import { ImagePreview } from 'vant'

export default {
  name: 'ImgInfo',
  components: {
    List, ErrorPic
  },
  data() {
    return {
      headHeight: 50,
      title: '',
      list: [],
      finished: false,
      parentObj: {
        optyCategoryId: '',
        optyId: '',
        page: ''
      }
    }
  },
  created() {
    const { optyCategoryId, page, optyId } = this.$route.query
    this.parentObj = { optyCategoryId, page, optyId }
    const map = {
      'design': '效果图',
      'three': '三视图',
      'measure': '量尺'
    }

    this.title = map[page] || ''
  },
  methods: {
    handleHeadHeight(h) {
      this.headHeight = h
    },
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      let otherFilters = []
      let url = ''
      const whiteList = ['measure', 'design']
      if (whiteList.includes(this.parentObj.page)) {
        otherFilters = [{ id: 'optyId', property: 'optyId', operator: '=', value: this.parentObj.optyId },
          { id: 'optyCategoryId', property: 'optyCategoryId', operator: '=', value: this.parentObj.optyCategoryId }]
        if (this.parentObj.page === 'design') url = '/app/v1/designSketch/page'
        else url = '/app/v1/measureInfo/page'
      } else {
        otherFilters = [{ id: 'moduleType1', property: 'moduleType', operator: '=', value: 'ThreeViews' },
          { id: 'objectId', property: 'objectId', operator: '=', value: this.parentObj.optyCategoryId }]
        url = '/app/v1/attachment/page'
      }

      const data = json2FormData({
        // pageFlag: true,
        filtersRaw: JSON.stringify(otherFilters),
        paramsRaw: JSON.stringify({}),
        page: page,
        rows: rows,
        sort: 'createTime',
        order: 'desc'
      })

      return getImgInfo(url, data).then(res => {
        const records = res.data.records || []
        this.list.push(...records)
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    // 查看图片
    clickPreviewHandle(i, ii) {
      let images = []
      let startPosition = 0

      if (ii !== undefined) {
        const childList = this.list[i].attachmentList
        images = childList.map(e => this.$formatURL(e.attachmentPath))
        startPosition = ii
      } else {
        images = this.list.map(e => this.$formatURL(e.attachmentPath || e.picUrl))
        startPosition = i
      }
      ImagePreview({
        images: images,
        startPosition: startPosition || 0
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .items {
    padding: 11px 16px 0;
    .item {
      background: #FFFFFF;
      border-radius: 10px;
      padding: 16px 16px 16px;
      margin-bottom: 16px;

      &:nth-last-of-type(1) {
        margin-bottom: 0;
      }

      .desc {
        font-size: 14px;
        font-weight: 600;
        color: #3C4458;
        line-height: 20px;
        letter-spacing: 1px;
        margin-bottom: 8px;
        word-break: break-all;
      }

      .img {
        margin-top: 4px;
      }
      .img-items {
        .img-item {
          margin-bottom: 14px;

          &:nth-last-of-type(1) {
            margin-bottom: 0;
          }
        }
      }
    }
  }
</style>
